<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单的表单验证</title>
</head>
<body>
	
	<h1>用户注册</h1>
	<form onsubmit = 'return checkFrom()'>
		<label>账号: <input id="username"  type="text"></label>
		<br><br>
		<label>密码: <input id="pas" type="password"></label>
		<br><br>
		<label>性别:</label>
		<label>男 <input type="radio" name="gender" checked></label>
		<label>女 <input type="radio" name="gender"></label>
		<br><br>
		<label>手机: <input id="mobile" type="text"></label>
		<br><br>
		<label>邮箱: <input id="email" type="text"></label>
		<br><br>
		<label>学历: 
			<select name="" id="edu"  8 fffff>
					<option value="0">请选择</option>
					<option value="1">大专</option>
					<option value="2">本科</option>
					<option value="3">硕士</option>
					<option value="4">博士</option>
					<option value="4">其他</option>

				</select>
		</label>
		<br><br>
		<label>自我介绍: 
			<textarea name="" id="int" cols="20" rows="5"></textarea>
		</label>
		<br><br>
		<label>爱好:
			<label>游泳:  <input name="hobbies" type="checkbox"></label>
			<label>旅游:  <input name="hobbies" type="checkbox"></label>
			<label>爬山:  <input name="hobbies" type="checkbox"></label>
		</label>
		<br><br>
		<input type="submit" value="确定并提交">
		<input type="reset" value="清空">
	</form>


	 <script src='js/jquery-3.1.1.js'></script> 
	<script>
		var checkFrom = function(){
			var username = document.getElementById('username');
			if(username.value == ''){
				alert('用户名不能为空');
				return false;
			};

			if(username.value.length<6){
				alert('用户名不能小于六位数');
				return false;
			};


			var pas = document.getElementById('pas');
			if(pas.value == ''){
				alert('密码不能为空');
				return false;
			};

			if(pas.value.length<6){
				alert('密码不能小于六位数');
				return false;
			};

			var mobile = document.getElementById('mobile');
			var mobileRG = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

			if(mobile.value=="") {
				alert('请填写手机号');
				return false;
			};

			if(!mobileRG.test(mobile.value)){
				alert('请输入正确的手机号');
			};

			var email = document.getElementById('email');
			 var emailValue=/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;

			if(email.value=="") {
				alert('请填写邮箱');
				return false;
			};

			if(!emailValue.test(email.value)){
				alert('请输入正确的邮箱');
				return false;
			};

			var edu = document.getElementById('edu');
			if(edu.value==0){
				alert('请选择学历');
				return false;
			};

			var int =document.getElementById('int');
			if(int.value==0){
				alert('请输入您的爱好');
				return false;
			}

			if(int.value.length<5){
				alert('自我介绍不能少于5字')
				return false;
			}

			if(int.value.length>50){
				alert('自我介绍不能大于50字')
				return false;
			}
			

			var hobbies = document.getElementsByName('hobbies');
			var hbArr = [];
			for(var i=0;i<hobbies.length;i++){
				if(hobbies[i].checked){
					hobbies.push(hobbies[i].value);
				}
				
			};

			if (hbArr.length == 0) {
				alert('请选择你的爱好！');
				/*return false;*/
				};
			alert('表单注册成功');

		}		
	</script>
	
</body>
